<template>
	<view class="nav-bar" :class="background">
		<view class="left">
			<slot name="left" />
		</view>
		<view class="center">
			<slot name="center" />
		</view>
		<view class="right">
			<slot name="right" />
		</view>
	</view>
</template>

<script>
	export default {
		name: "NavBar",
		props: {
			isItem: {
				type: Boolean,
				default () {
					return false;
				}
			},
		},
		computed: {
			background() {
				return this.isItem ? 'white' : '';
			}
		},
	};
</script>
<style lang="scss" scoped>
	.nav-bar {
		display: flex;
		text-align: center;
		/* box-shadow: 0 1px 2px rgba(250, 235, 215, 0.623); */
		font-size: 3vh;
		width: 100vw;

		/* #ifndef APP */
		line-height: $nav-height;
		height: $nav-height;
		/* #endif */

		// box-sizing: border-box;
		/* #ifdef MP */
		padding-top: $top-height;
		/* #endif */


		/* #ifdef APP */
		padding-top: var(--status-bar-height);
		line-height: calc($nav-height + var(--status-bar-height));
		height: calc($nav-height + var(--status-bar-height));
		/* #endif */

		.right,
		.left {
			width: 120rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.right img,
		.left img {
			width: 52rpx;
			height: 52rpx;
		}


		.center {
			display: flex;
			flex: 1;
			justify-content: center;
			align-items: center;
			width: 100%;
			padding: 6rpx 0rpx;
			box-sizing: border-box;
		}
	}

	.white {
		background-color: white;
	}
</style>
